<template>
  <el-dialog :close-on-click-modal="false" :visible="$store.state.isFormDialogVis"
             center title="加入我们，分享你所见到的世界"
             width="32%" @close="closeDialog">
    <el-tabs v-if="isLoginPage" v-model="tabName"
             :before-leave="clearCurrentForm" type="border-card">
      <el-tab-pane label="登录" name="login">
        <Login @forgetPass="changePage"/>
      </el-tab-pane>
      <el-tab-pane label="注册" lazy name="register">
        <Register/>
      </el-tab-pane>
    </el-tabs>

    <ForgetPassword v-if="!isLoginPage" @finishChange="changePage"/>
  </el-dialog>
</template>

<script>
import Register from "@/components/Register";
import Login from "@/components/Login";
import ForgetPassword from "@/components/ForgetPassword";
export default {
  name: "FormDialog",
  data() {
    return {
      tabName: 'login',
      isLoginPage: true,
    }
  },
  components: {
    Register,
    Login,
    ForgetPassword,
  },
  methods: {
    closeDialog() {
      this.$bus.$emit('resetRegForm');
      this.$bus.$emit('resetLogForm');
      this.isLoginPage = true;
      this.$store.state.isFormDialogVis = false;
    },
    clearCurrentForm(activeName, oldActiveName) {
      if (oldActiveName === 'login') {
        this.$bus.$emit('clearLogValRes');
      } else {
        this.$bus.$emit('clearRegValRes');
      }
      return true
    },
    changePage() {
      this.isLoginPage = !this.isLoginPage;
    }
  }
}
</script>

<style scoped>

</style>